<template>
  <div class="box">
    <table>
      <caption>
        <thead>
          欢迎光临vue开发的收银系统水果店
        </thead>
      </caption>
      <tr>
        <th>苹果{{ price }} ￥/斤,折扣{{ zhekou }}</th>
      </tr>
      <tbody>
        <tr>
          <th>
            <span>请输入你要购买的斤数</span>
            <input type="number" v-model="num" />
          </th>
        </tr>
        <tr>
          <td>
            <button @click="btnFn">结账买单</button>
          </td>
        </tr>
        <tr>
          <td>
            <span>结账单:总价：{{ zongjia }}</span>;
            <span>折后：{{zhehou}}</span>;
            <span>省了:{{sheng}}￥元</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      zhekou: '<8折>',
      zongjia: 0,
      zhehou: 0,
      sheng: 0,
      num: 0,
    }
  },

  created() {},

  methods: {
    btnFn(){
      this.zongjia = this.num * this.price
      this.zhehou = this.zongjia * 0.8
      this.sheng = this.zongjia - this.zhehou
    }
  },
}
</script>

<style scoped>
table {
  width: 500px;
  height: 100px;
  border: 1px solid #000;
  margin: 50px auto;
  text-align: center;
}
th,
tr,
td {
  border: 1px solid #000;
  height: 50px;
}
</style>
